<template>
  <div class="customer-profile-manage">
    <el-container>
      <!-- 左侧分类面板 -->
      <el-aside width="350px" class="category-panel">
        <div class="panel-header">
          <h3>画像分类</h3>
          <div class="header-actions">
            <el-button
              type="text"
              size="small"
              icon="el-icon-document-copy"
              :loading="promptLoading"
              title="获取客户画像提取prompt"
              style="margin-right: 10px; color: #409eff"
              @click="handleGetPrompt"
            />
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              :loading="categoryActionLoading"
              @click="handleAddCategory"
            >添加分类</el-button>
          </div>
        </div>

        <div class="search-box">
          <el-input
            v-model="categorySearchKeyword"
            placeholder="搜索分类..."
            prefix-icon="el-icon-search"
            clearable
            size="small"
            @input="handleCategorySearch"
          />
        </div>

        <div v-loading="categoryListLoading" class="category-list">
          <div
            v-for="category in filteredCategories"
            :key="category.id"
            :class="['category-item', { active: selectedCategoryId === category.id }]"
            @click="selectCategory(category)"
          >
            <div class="category-content">
              <div class="category-name">{{ category.name }}</div>
              <div class="category-meta">
                <el-tag size="mini" type="info">{{ category.parameter_count || 0 }}个参数</el-tag>
                <span class="create-time">{{ category.create_at | formatDate }}</span>
              </div>
            </div>
            <div class="category-actions">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                title="编辑分类"
                @click.stop="handleEditCategory(category)"
              />
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                title="删除分类"
                style="color: #f56c6c"
                @click.stop="handleDeleteCategory(category)"
              />
            </div>
          </div>

          <div v-if="filteredCategories.length === 0" class="empty-state">
            <i class="el-icon-folder-opened" />
            <p>暂无分类</p>
          </div>
        </div>
      </el-aside>

      <!-- 右侧参数面板 -->
      <el-main class="parameter-panel">
        <div v-if="selectedCategoryId" class="parameter-content">
          <div class="panel-header">
            <h3>{{ selectedCategoryName }} - 参数列表</h3>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              :loading="parameterActionLoading"
              @click="handleAddParameter"
            >添加参数</el-button>
          </div>

          <div class="parameter-filters">
            <el-select
              v-model="selectedParamType"
              placeholder="筛选参数类型"
              clearable
              size="small"
              style="width: 150px"
              @change="handleParameterFilter"
            >
              <el-option label="绿线" value="green_line">
                <span style="color: #67C23A">● 绿线</span>
              </el-option>
              <el-option label="红线" value="red_line">
                <span style="color: #F56C6C">● 红线</span>
              </el-option>
              <el-option label="正常" value="normal">
                <span style="color: #909399">● 正常</span>
              </el-option>
            </el-select>

            <el-input
              v-model="parameterSearchKeyword"
              placeholder="搜索参数..."
              prefix-icon="el-icon-search"
              clearable
              size="small"
              style="width: 200px; margin-left: 10px"
              @input="handleParameterSearch"
            />
          </div>

          <div v-loading="parameterListLoading" class="parameter-grid">
            <div
              v-for="parameter in filteredParameters"
              :key="parameter.id"
              :class="['parameter-card', getParamTypeClass(parameter.param_type)]"
              @click="handleEditParameter(parameter)"
            >
              <div class="parameter-header">
                <div class="parameter-name">{{ parameter.name }}</div>
                <div class="parameter-type">
                  <el-tag
                    :type="getParamTypeColor(parameter.param_type)"
                    size="mini"
                  >
                    {{ parameter.param_type_display }}
                  </el-tag>
                </div>
              </div>
              <div class="parameter-footer">
                <span class="creator">{{ parameter.creator_name }}</span>
                <span class="create-time">{{ parameter.create_at | formatDate }}</span>
              </div>
              <div class="parameter-actions">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-delete"
                  title="删除参数"
                  style="color: #f56c6c"
                  @click.stop="handleDeleteParameter(parameter)"
                />
              </div>
            </div>

            <div v-if="filteredParameters.length === 0" class="empty-state">
              <i class="el-icon-document" />
              <p>暂无参数</p>
            </div>
          </div>
        </div>

        <div v-else class="no-category-selected">
          <i class="el-icon-folder-opened" />
          <h3>请选择一个分类</h3>
          <p>选择左侧的分类来查看和管理参数</p>
        </div>
      </el-main>
    </el-container>

    <!-- 分类编辑对话框 -->
    <el-dialog
      :title="categoryDialogTitle"
      :visible.sync="categoryDialogVisible"
      width="500px"
      @close="resetCategoryForm"
    >
      <el-form
        ref="categoryForm"
        :model="categoryForm"
        :rules="categoryRules"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="categoryForm.name"
            placeholder="请输入分类名称"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="categoryDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="categoryActionLoading"
          @click="confirmCategoryAction"
        >确定</el-button>
      </div>
    </el-dialog>

    <!-- 参数编辑对话框 -->
    <el-dialog
      :title="parameterDialogTitle"
      :visible.sync="parameterDialogVisible"
      width="500px"
      @close="resetParameterForm"
    >
      <el-form
        ref="parameterForm"
        :model="parameterForm"
        :rules="parameterRules"
        label-width="100px"
      >
        <el-form-item label="参数名称" prop="name">
          <el-input
            v-model="parameterForm.name"
            placeholder="请输入参数名称"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="参数类型" prop="param_type">
          <el-select
            v-model="parameterForm.param_type"
            placeholder="请选择参数类型"
            style="width: 100%"
          >
            <el-option label="绿线" value="green_line">
              <span style="color: #67C23A">● 绿线 - 正向指标</span>
            </el-option>
            <el-option label="红线" value="red_line">
              <span style="color: #F56C6C">● 红线 - 风险指标</span>
            </el-option>
            <el-option label="正常" value="normal">
              <span style="color: #909399">● 正常 - 一般指标</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="parameterDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="parameterActionLoading"
          @click="confirmParameterAction"
        >确定</el-button>
      </div>
    </el-dialog>

    <!-- Prompt显示对话框 -->
    <el-dialog
      title="客户画像提取Prompt"
      :visible.sync="promptDialogVisible"
      width="70%"
      top="5vh"
      @close="closePromptDialog"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="prompt-info">
            <p><strong>项目ID:</strong> {{ promptData.project_id || '-' }}</p>
            <p><strong>生成时间:</strong> {{ currentTime }}</p>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="prompt-content">
            <div class="prompt-header">
              <span>Prompt内容：</span>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-document-copy"
                :loading="copyLoading"
                @click="copyPrompt"
              >复制</el-button>
            </div>
            <el-input
              v-model="promptData.prompt"
              type="textarea"
              :rows="20"
              readonly
              placeholder="暂无prompt内容"
              class="prompt-textarea"
            />
          </div>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="promptDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetCRMCustomerProfileCategory,
  PostCRMCustomerProfileCategory,
  PutCRMCustomerProfileCategory,
  DeleteCRMCustomerProfileCategory,
  GetCRMCustomerProfileParameter,
  PostCRMCustomerProfileParameter,
  PutCRMCustomerProfileParameter,
  DeleteCRMCustomerProfileParameter
} from '@/api/crm/crmcustomerprofile'

export default {
  name: 'CRMCustomerProfileManage',

  filters: {
    formatDate(value) {
      if (!value) return ''
      const date = new Date(value)
      return date.toLocaleDateString()
    }
  },
  data() {
    return {
      // 分类相关
      categories: [],
      categoryListLoading: false,
      categorySearchKeyword: '',
      selectedCategoryId: null,
      selectedCategoryName: '',

      // 分类操作
      categoryDialogVisible: false,
      categoryDialogTitle: '',
      categoryAction: '',
      categoryActionLoading: false,
      categoryForm: {
        name: ''
      },
      categoryRules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ]
      },

      // 参数相关
      parameters: [],
      parameterListLoading: false,
      parameterSearchKeyword: '',
      selectedParamType: '',

      // 参数操作
      parameterDialogVisible: false,
      parameterDialogTitle: '',
      parameterAction: '',
      parameterActionLoading: false,
      parameterForm: {
        name: '',
        param_type: 'normal'
      },
      parameterRules: {
        name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        param_type: [
          { required: true, message: '请选择参数类型', trigger: 'change' }
        ]
      },

      // 新添加的属性
      promptLoading: false,
      promptDialogVisible: false,
      promptData: {},
      currentTime: '',
      copyLoading: false
    }
  },

  computed: {
    // 过滤后的分类列表
    filteredCategories() {
      if (!this.categorySearchKeyword) {
        return this.categories
      }
      return this.categories.filter(category =>
        category.name.toLowerCase().includes(this.categorySearchKeyword.toLowerCase())
      )
    },

    // 过滤后的参数列表
    filteredParameters() {
      let filtered = this.parameters

      // 按类型筛选
      if (this.selectedParamType) {
        filtered = filtered.filter(param => param.param_type === this.selectedParamType)
      }

      // 按名称搜索
      if (this.parameterSearchKeyword) {
        filtered = filtered.filter(param =>
          param.name.toLowerCase().includes(this.parameterSearchKeyword.toLowerCase())
        )
      }

      return filtered
    }
  },

  created() {
    this.loadCategories()
  },

  methods: {
    // ====== 分类管理 ======

    // 获取分类列表
    async loadCategories() {
      this.categoryListLoading = true
      try {
        const response = await GetCRMCustomerProfileCategory('', 'pageSize=1000')
        if (response.success) {
          this.categories = response.data.data || []
        } else {
          this.$message.error('获取分类列表失败：' + (response.msg || '未知错误'))
        }
      } catch (error) {
        console.error(error)
        let errorMessage = '获取分类列表失败'
        if (error.response && error.response.data && error.response.data.msg) {
          errorMessage += '：' + error.response.data.msg
        } else if (error.message) {
          errorMessage += '：' + error.message
        }
        this.$message.error(errorMessage)
      } finally {
        this.categoryListLoading = false
      }
    },

    // 选择分类
    selectCategory(category) {
      this.selectedCategoryId = category.id
      this.selectedCategoryName = category.name
      this.loadParameters()
    },

    // 添加分类
    handleAddCategory() {
      this.categoryAction = 'create'
      this.categoryDialogTitle = '添加画像分类'
      this.resetCategoryForm() // 确保表单是清空状态
      this.categoryDialogVisible = true
    },

    // 编辑分类
    handleEditCategory(category) {
      this.categoryAction = 'edit'
      this.categoryDialogTitle = '编辑分类'
      this.categoryForm.name = category.name
      this.categoryForm.id = category.id
      this.categoryDialogVisible = true
    },

    // 删除分类
    handleDeleteCategory(category) {
      this.$confirm(
        `确认删除分类"${category.name}"吗？删除后该分类下的所有参数也将被删除。`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async() => {
        try {
          await DeleteCRMCustomerProfileCategory(category.id)
          this.$message.success('删除成功')
          this.loadCategories()
          if (this.selectedCategoryId === category.id) {
            this.selectedCategoryId = null
            this.selectedCategoryName = ''
            this.parameters = []
          }
        } catch (error) {
          console.error(error)
          this.$message.error('删除失败')
        }
      })
    },

    // 确认分类操作
    confirmCategoryAction() {
      this.$refs.categoryForm.validate(async(valid) => {
        if (!valid) return

        this.categoryActionLoading = true
        try {
          if (this.categoryAction === 'create') {
            await PostCRMCustomerProfileCategory(this.categoryForm)
            this.$message.success('添加成功')
          } else if (this.categoryAction === 'edit') {
            await PutCRMCustomerProfileCategory(this.categoryForm.id, this.categoryForm)
            this.$message.success('更新成功')
          }

          this.categoryDialogVisible = false
          this.loadCategories()
        } catch (error) {
          console.error(error)
          // 显示详细的错误信息
          let errorMessage = this.categoryAction === 'create' ? '添加失败' : '更新失败'
          if (error.response && error.response.data && error.response.data.msg) {
            errorMessage += '：' + error.response.data.msg
          } else if (error.message) {
            errorMessage += '：' + error.message
          }
          this.$message.error(errorMessage)
        } finally {
          this.categoryActionLoading = false
        }
      })
    },

    // 重置分类表单
    resetCategoryForm() {
      this.categoryForm = { name: '' }
      this.$refs.categoryForm && this.$refs.categoryForm.resetFields()
    },

    // 分类搜索
    handleCategorySearch() {
      // 实时搜索，通过计算属性实现
    },

    // ====== 参数管理 ======

    // 获取参数列表
    async loadParameters() {
      if (!this.selectedCategoryId) return

      this.parameterListLoading = true
      try {
        const params = `category_id=${this.selectedCategoryId}&pageSize=1000`
        const response = await GetCRMCustomerProfileParameter('', params)
        if (response.success) {
          this.parameters = response.data.data || []
        } else {
          this.$message.error('获取参数列表失败：' + (response.msg || '未知错误'))
        }
      } catch (error) {
        console.error(error)
        let errorMessage = '获取参数列表失败'
        if (error.response && error.response.data && error.response.data.msg) {
          errorMessage += '：' + error.response.data.msg
        } else if (error.message) {
          errorMessage += '：' + error.message
        }
        this.$message.error(errorMessage)
      } finally {
        this.parameterListLoading = false
      }
    },

    // 添加参数
    handleAddParameter() {
      if (!this.selectedCategoryId) {
        this.$message.warning('请先选择一个分类')
        return
      }

      this.parameterAction = 'create'
      this.parameterDialogTitle = `为"${this.selectedCategoryName}"添加参数`
      this.resetParameterForm() // 确保表单是清空状态
      this.parameterDialogVisible = true
    },

    // 编辑参数
    handleEditParameter(parameter) {
      this.parameterAction = 'edit'
      this.parameterDialogTitle = '编辑参数'
      this.parameterForm.name = parameter.name
      this.parameterForm.param_type = parameter.param_type
      this.parameterForm.id = parameter.id
      this.parameterDialogVisible = true
    },

    // 删除参数
    handleDeleteParameter(parameter) {
      this.$confirm(
        `确认删除参数"${parameter.name}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async() => {
        try {
          await DeleteCRMCustomerProfileParameter(parameter.id)
          this.$message.success('删除成功')
          this.loadParameters()
          this.loadCategories() // 刷新分类列表以更新参数数量
        } catch (error) {
          console.error(error)
          this.$message.error('删除失败')
        }
      })
    },

    // 确认参数操作
    confirmParameterAction() {
      this.$refs.parameterForm.validate(async(valid) => {
        if (!valid) return

        this.parameterActionLoading = true
        try {
          const paramData = {
            ...this.parameterForm,
            category_id: this.selectedCategoryId
          }

          if (this.parameterAction === 'create') {
            await PostCRMCustomerProfileParameter(paramData)
            this.$message.success('添加成功')
          } else if (this.parameterAction === 'edit') {
            await PutCRMCustomerProfileParameter(this.parameterForm.id, paramData)
            this.$message.success('更新成功')
          }

          this.parameterDialogVisible = false
          this.loadParameters()
          this.loadCategories() // 刷新分类列表以更新参数数量
        } catch (error) {
          console.error(error)
          // 显示详细的错误信息
          let errorMessage = this.parameterAction === 'create' ? '添加失败' : '更新失败'
          if (error.response && error.response.data && error.response.data.msg) {
            errorMessage += '：' + error.response.data.msg
          } else if (error.message) {
            errorMessage += '：' + error.message
          }
          this.$message.error(errorMessage)
        } finally {
          this.parameterActionLoading = false
        }
      })
    },

    // 重置参数表单
    resetParameterForm() {
      this.parameterForm = { name: '', param_type: 'normal' }
      this.$refs.parameterForm && this.$refs.parameterForm.resetFields()
    },

    // 参数搜索
    handleParameterSearch() {
      // 实时搜索，通过计算属性实现
    },

    // 参数类型筛选
    handleParameterFilter() {
      // 通过计算属性实现
    },

    // ====== 工具方法 ======

    // 获取参数类型颜色
    getParamTypeColor(paramType) {
      switch (paramType) {
        case 'green_line':
          return 'success'
        case 'red_line':
          return 'danger'
        case 'normal':
        default:
          return 'info'
      }
    },

    // 获取参数卡片样式类
    getParamTypeClass(paramType) {
      switch (paramType) {
        case 'green_line':
          return 'param-green'
        case 'red_line':
          return 'param-red'
        case 'normal':
        default:
          return 'param-normal'
      }
    },

    // 获取prompt
    async handleGetPrompt() {
      this.promptLoading = true
      try {
        const response = await GetCRMCustomerProfileCategory('', 'generate_prompt=true')
        if (response.success) {
          this.openPromptDialog(response.data)
          this.$message.success(response.msg || '获取prompt成功')
        } else {
          this.$message.error('获取prompt失败：' + (response.msg || '未知错误'))
        }
      } catch (error) {
        console.error(error)
        let errorMessage = '获取prompt失败'
        if (error.response && error.response.data && error.response.data.msg) {
          errorMessage += '：' + error.response.data.msg
        } else if (error.message) {
          errorMessage += '：' + error.message
        }
        this.$message.error(errorMessage)
      } finally {
        this.promptLoading = false
      }
    },

    // 打开prompt对话框
    openPromptDialog(data) {
      this.promptData = data || {}
      this.promptDialogVisible = true
      this.currentTime = new Date().toLocaleString()
    },

    // 关闭prompt对话框
    closePromptDialog() {
      this.promptDialogVisible = false
      this.promptData = {}
    },

    // 复制prompt
    async copyPrompt() {
      if (!this.promptData.prompt) {
        this.$message.warning('没有可复制的内容')
        return
      }

      this.copyLoading = true
      try {
        // 使用Clipboard API复制文本
        if (navigator.clipboard && window.isSecureContext) {
          await navigator.clipboard.writeText(this.promptData.prompt)
        } else {
          // 降级方案：使用传统的复制方法
          const textArea = document.createElement('textarea')
          textArea.value = this.promptData.prompt
          textArea.style.position = 'fixed'
          textArea.style.left = '-999999px'
          textArea.style.top = '-999999px'
          document.body.appendChild(textArea)
          textArea.focus()
          textArea.select()
          document.execCommand('copy')
          textArea.remove()
        }
        this.$message.success('复制成功')
      } catch (error) {
        console.error(error)
        this.$message.error('复制失败：' + (error.message || '未知错误'))
      } finally {
        this.copyLoading = false
      }
    }
  }
}
</script>

<style scoped>
.customer-profile-manage {
  height: calc(100vh - 120px);
  background: #f5f7fa;
}

.el-container {
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 左侧分类面板 */
.category-panel {
  border-right: 1px solid #e6e6e6;
  background: #fafbfc;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.category-list {
  height: calc(100% - 140px);
  overflow-y: auto;
  padding: 10px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.category-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.category-item.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.category-content {
  flex: 1;
}

.category-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.category-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.create-time {
  font-size: 12px;
  color: #909399;
}

.category-actions {
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}

.category-item:hover .category-actions {
  opacity: 1;
}

/* 右侧参数面板 */
.parameter-panel {
  padding: 0;
}

.parameter-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.parameter-filters {
  padding: 15px 20px;
  background: #fafbfc;
  border-bottom: 1px solid #e6e6e6;
}

.parameter-grid {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  align-content: start;
}

.parameter-card {
  position: relative;
  padding: 15px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.parameter-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.parameter-card.param-green {
  border-left: 4px solid #67c23a;
}

.parameter-card.param-red {
  border-left: 4px solid #f56c6c;
}

.parameter-card.param-normal {
  border-left: 4px solid #909399;
}

.parameter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.parameter-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.parameter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.parameter-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.parameter-card:hover .parameter-actions {
  opacity: 1;
}

/* 无选择状态 */
.no-category-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
}

.no-category-selected i {
  font-size: 64px;
  margin-bottom: 20px;
}

.no-category-selected h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #909399;
  grid-column: 1 / -1;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
}

/* 对话框 */
.dialog-footer {
  text-align: right;
}

/* 滚动条样式 */
.category-list::-webkit-scrollbar,
.parameter-grid::-webkit-scrollbar {
  width: 6px;
}

.category-list::-webkit-scrollbar-track,
.parameter-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb,
.parameter-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb:hover,
.parameter-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Prompt Dialog 样式 */
.prompt-info {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.prompt-info p {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.prompt-content {
  position: relative;
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 500;
  color: #303133;
}

.prompt-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.prompt-textarea .el-textarea__inner {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
}
</style>
